<template>
  <view class="viewpoint">
    <!-- 导航栏 -->
    <navibar></navibar>
    <!-- tab栏 -->
    <view class="tabs">
      <zb-tab
        :shrink="list1 && list1.length >= 8"
        :activeStyle="{
          fontWeight: 'bold',
          transform: 'scale(1.1)',
          color: '#f04142',
        }"
        :data="list1"
        v-model="active"
      ></zb-tab>
    </view>
    <!-- 新闻内容 -->
    <view class="swiper">
      <swiper
        @change="SwiperChange"
        :disable-touch="isSwiper"
        :current="active"
        catchtouchmove="true"
      >
        <!-- 滑动项 -->
        <swiper-item v-for="Swiper in list1" :key="Swiper.value">
          <scroll-view
            :refresher-enabled="true"
            @refresherpulling="refresh"
            :refresher-triggered="isfresh"
            scroll-y
            class="list"
            @scrolltolower="onScrollTolower"
          >
            <view v-for="(Item, i) in NewsList" :key="Item.newsId">
              <!-- part1 -->
              <view class="part1" v-if="Item.newsImgArr.length === 3" @tap="todetail(Item.newsId)">
                <!-- 用户信息 -->
                <view class="user">
                  <!-- 用户头像 -->
                  <view class="img">
                    <image :src="Item.avatar" mode="scaleToFill" />
                  </view>
                  <!-- 用户名字-简介 -->
                  <view class="userinfo">
                    <view class="name">{{ Item.username }}</view>
                    <view class="introduce">{{ Item.userInfo }}</view>
                  </view>
                </view>
                <view class="news">
                  <!-- 标题 -->
                  <view class="title">
                    <text>{{ Item.title }}</text>
                  </view>
                  <!-- 图片 -->
                  <view class="newimg">
                    <view class="I" v-for="item in Item.newsImgArr" :key="item">
                      <image :src="item" />
                    </view>
                  </view>
                  <!-- 点赞上传浏览量 -->
                  <infoicon :newsitem="memberStore.infoArr[i]"></infoicon>
                </view>
              </view>
              <!-- part2 -->
              <view class="part2" @tap="todetail(Item.newsId)" v-else>
                <view class="A">
                  <!-- 新闻内容 -->
                  <view class="N_img"><image :src="Item.newsImgArr[0]" /></view>
                  <view class="news_contant">
                    <view class="N_title">{{ Item.title }}</view>
                    <view class="N_content" v-html="Item.content"></view>
                  </view>
                </view>
                <!-- 点赞上传浏览量 -->
                <infoicon :newsitem="memberStore.infoArr[i]"></infoicon>
              </view>
            </view>
            <view style="text-align: center; color: #929191; font-size: 28rpx">{{
              finish ? '正在加载...' : '没有更多了~~'
            }}</view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
import infoicon from './components/infoicon.vue'
import navibar from './components/navibar.vue'
import { ref, onMounted, defineProps, computed } from 'vue'
import { getNewAPI, getCatrgoryAPI } from '@/services/news'
import type { news, getnews, newsItem, category } from '@/types/index'
import { onLoad, onShow, onTabItemTap } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores/index'
const memberStore = useMemberStore()
// 下拉刷新
const isfresh = ref(false)
//点赞收藏浏览副本
let infoArr = ref<
  {
    viewCount: number
    likeCount: number
    favoriteCount: number
    clickLike: boolean
    clickFavorite: boolean
    newsId: number
    releaseTime: string
  }[]
>([])
//tab栏标识
const active = ref(0)
//新闻列表
let NewsList = ref<newsItem[]>([])
//tab数据
const list1 = ref<category[]>()

// 切换轮播
const isSwiper = ref(false)
const Change = (ev: any) => {}
const SwiperChange: UniHelper.SwiperOnChange = async (ev) => {
  NewsList.value = []
  active.value = ev.detail.current
  pageParam.value.page = 1
  finish.value = true
  isSwiper.value = true
  await getNewList()
  setTimeout(() => {
    isSwiper.value = false
  }, 500)
}
//分页参数
const pageParam = ref({
  page: 1,
  pageSize: 5,
  categoryId: 0,
})

//获取新闻列表
const finish = ref(true) //true为还没到头
const getNewList = async () => {
  pageParam.value.categoryId = active.value
  if (finish.value == false) {
    return uni.showToast({ icon: 'none', title: '到底了' })
  }

  const res = await getNewAPI(pageParam.value)
  NewsList.value.push(...res.data.newsList.list)
  infoArr.value = []
  NewsList.value.forEach((item: newsItem) => {
    item.content = item.content.replace(/<img\b[^>]*>/gi, '')
    infoArr.value.push({
      likeCount: item.likeCount,
      favoriteCount: item.favoriteCount,
      viewCount: item.viewCount,
      clickLike: item.clickLike,
      clickFavorite: item.clickFavorite,
      newsId: item.newsId,
      releaseTime: item.releaseTime,
    })
  })
  memberStore.set_infoArr(infoArr.value)
  if (pageParam.value.page < res.data.newsList.pages) {
    pageParam.value.page++
  } else {
    finish.value = false
  }
}
//获取分类数据
const getCategory = async () => {
  const res = await getCatrgoryAPI()
  list1.value = res.data
  list1.value.unshift({ name: '推荐', value: 0 })
}
//滑动触底
const onScrollTolower = () => {
  getNewList()
}
//点击新闻
const todetail = (newsId: number) => {
  uni.navigateTo({ url: `/pages/detail/detail?newsId=${newsId}` })
}
//
const refreshNesw = async () => {
  finish.value = true
  NewsList.value = []
  pageParam.value.page = 1
  const res = await getNewAPI(pageParam.value)
  NewsList.value = res.data.newsList.list
  infoArr.value = []
  NewsList.value.forEach((item: newsItem) => {
    item.content = item.content.replace(/<img\b[^>]*>/gi, '')
    infoArr.value.push({
      likeCount: item.likeCount,
      favoriteCount: item.favoriteCount,
      viewCount: item.viewCount,
      clickLike: item.clickLike,
      clickFavorite: item.clickFavorite,
      newsId: item.newsId,
      releaseTime: item.releaseTime,
    })
  })
  memberStore.set_infoArr(infoArr.value)
  pageParam.value.page = 2
}
const fresh = async () => {
  finish.value = true
  NewsList.value = []
  pageParam.value.page = 1
  await getNewList()
}
// 下拉刷新)
const refresh = async () => {
  isfresh.value = true

  setTimeout(async () => {
    isfresh.value = false
    await refreshNesw()
  }, 1000)
}
onLoad(() => {
  fresh()
  getCategory()
  uni.$on('refreshIndex', fresh)
})
// onTabItemTap(() => {
//   finish.value = true
//   NewsList.value = []
//   pageParam.value.page = 1
//   getNewList()
//   getCategory()
// })
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 80rpx;
  line-height: 70rpx;
  margin: 10rpx 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #0c0c0c !important;
  background-color: #fff;
  position: relative;
  z-index: 9;

  .text {
    margin: 0 20rpx;
    position: relative;
    font-weight: bold;
  }
  .active {
    color: #f04142;
    /* 过渡效果 */

    &::after {
      content: '';
      width: 40rpx;
      height: 6rpx;
      transform: translate(-50%);
      background-color: #f04142;
      position: absolute;
      left: 50%;
      bottom: 15rpx;
    }
  }
}
.swiper {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  height: 80rpx;
  line-height: 70rpx;
  margin: 0rpx 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #0c0c0c !important;
  background-color: #fff;
  position: relative;
}
.list {
  padding: 10rpx 20rpx;
  .part1 {
    border-bottom: 1rpx solid #ccc;
    margin-bottom: 30rpx;
    .user {
      display: flex;
      height: 100rpx;
      margin-bottom: 10rpx;
      .img {
        height: 100%;
        width: 100rpx;
        border-radius: 100rpx;
        overflow: hidden;
      }
      .userinfo {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 30rpx;
        .name,
        .introduce {
          height: 50rpx;
          line-height: 50rpx;
          text-align: left;
        }
        .name {
          font-size: 28rpx;
          color: #000;
          font-weight: bold;
        }
        .introduce {
          font-size: 24rpx;
          color: #757474;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
    .news {
      .title {
        line-height: 55rpx;
        margin-bottom: 15rpx;
        color: #000;
        font-size: 30rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .newimg {
        height: 200rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .I {
          height: 200rpx;
          width: 200rpx;
        }
      }
    }
  }
  .part2 {
    margin-bottom: 20rpx;
    border-bottom: 2rpx solid #ccc;
    .A {
      display: flex;
      flex-direction: row-reverse;
      padding: 20rpx 0;
      height: 260rpx;
      .N_img {
        height: 100%;
        width: 220rpx;
      }
      .news_contant {
        flex: 1;
        margin-right: 10rpx;
        .N_title {
          font-size: 30rpx;
          color: #000;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          line-height: 55rpx;
          margin-bottom: 5rpx;
        }
        .N_content {
          font-size: 26rpx;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          line-height: 40rpx;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>